<template>
  <Container class="mobile-form-modal">
    <div class="mobile-form-modal-inner">
      <div class="title">{{ $t("form.updateIntention.title") }}</div>
      <a-form class="form" :model="formState" ref="formRef">
        <a-form-item
          class="form-item"
          :label="$t('form.updateIntention.form.item_1.label')"
          name="salary_expectation"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_1.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.salary_expectation"
            :placeholder="$t('form.updateIntention.form.item_1.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updateIntention.form.item_2.label')"
          name="birthday"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_2.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-date-picker
            v-model:value="formState.birthday"
            value-format="YYYY-MM-DD"
            :placeholder="$t('form.updateIntention.form.item_2.rules.error_1')"
            :allowClear="false"
          />
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updateIntention.form.item_3.label')"
          name="position_name"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_3.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.position_name"
            :placeholder="$t('form.updateIntention.form.item_3.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updateIntention.form.item_7.label')"
          name="address"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_4.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="50"
            v-model:value.trim="formState.address"
            :placeholder="$t('form.updateIntention.form.item_7.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item"
          :label="$t('form.updateIntention.form.item_5.label')"
          name="personal_label"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_5.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            :maxlength="30"
            v-model:value.trim="formState.personal_label"
            :placeholder="$t('form.updateIntention.form.item_5.rules.error_1')"
          ></a-input>
        </a-form-item>
        <a-form-item
          class="form-item editor"
          :class="[formState.objective ? 'vertical' : '']"
          :label="$t('form.updateIntention.form.item_6.label')"
          name="objective"
          :rules="[
            {
              required: true,
              message: $t('form.updateIntention.form.item_6.rules.error_1'),
              trigger: 'blur',
            },
          ]"
        >
          <div class="flex-1" @click="editorVisible = true">
            <div class="raw-html">
              <div class="ql-editor" v-html="formState.objective"></div>
            </div>
            <span class="editor-text"
              >{{ $t("editor.evaluation") }}
              <IconArrowRight fill="rgba(0, 0, 0, 0.25)" />
            </span>
          </div>
        </a-form-item>
      </a-form>
      <div class="footer-btn">
        <div class="footer-btn-inner">
          <a-button @click="goBack">{{ $t("btnText.cancel") }}</a-button>
          <a-button
            class="ensure-btn"
            :class="formIsValid ? '' : 'disabled'"
            type="primary"
            @click="continuePublish"
            >{{ $t("btnText.save") }}</a-button
          >
        </div>
      </div>
    </div>
  </Container>
  <EditorMobile
    v-model="formState.objective"
    :placeholder="$t('editor.evaluation')"
    v-model:visible="editorVisible"
  />
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { postUpdateMemberOne } from "../../api/member";
import { useMemberStore } from "../../store";
import type { IntentionEditParams } from "../../types/profile";
import { postMemberIntentionEdit } from "../../api/profile";

const router = useRouter();
const memberStore = useMemberStore();

const editorVisible = ref(false);
const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const initForm = () => {
  let data = JSON.parse(sessionStorage.getItem("params")!);
  formState.value = {
    salary_expectation: data.salary_expectation || "",
    birthday: data.birthday || "",
    position_name: data.position_name || "",
    address: data.address || "",
    personal_label: data.personal_label || "",
    objective: data.objective || "",
    entry_time: data.entry_time || "",
  };
};

const formIsValid = computed(() => {
  let flag = true;
  if (!formState.value.salary_expectation) flag = false;
  if (!formState.value.birthday) flag = false;
  if (!formState.value.position_name) flag = false;
  if (!formState.value.address) flag = false;
  if (!formState.value.personal_label) flag = false;
  if (!formState.value.objective) flag = false;
  if (!formState.value.entry_time) flag = false;
  return flag;
});

// 发布
const formState = ref<IntentionEditParams>({
  salary_expectation: "",
  birthday: "",
  position_name: "",
  address: "",
  personal_label: "",
  objective: "",
  entry_time: "",
});

const formRef = ref();

const continuePublish = () => {
  if (!formIsValid.value) return;
  let lang = sessionStorage.getItem("m_lang")!;
  formRef.value.validate().then(async () => {
    let res = await postMemberIntentionEdit({ ...formState.value, lang });
    if (res.code === 200) {
      message.success($t("message.changed_success"));
      goBack();
    } else {
      goBack();
      message.error($t("message.error.update"));
    }
  });
};
const goBack = () => {
  sessionStorage.removeItem("params");
  sessionStorage.removeItem("m_lang");
  router.go(-1);
};

onMounted(() => {
  initForm();
});
</script>
<style lang="less">
.mobile-form-modal {
  .wrap-container > .wrap-pl {
    padding-bottom: 0 !important;
  }
}
</style>
<style scoped lang="less">
@import url("./common.less");

:deep(.form) {
  .form-item {
    .ant-row {
      width: 100%;
      justify-content: space-between;
      .ant-col {
        flex: 0 0 auto;
      }
    }
  }
}
</style>
